<template>
	<view class="container">
		<view class="top">
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0" v-for="(item,index) in list"
				:key="item.id">
				<view class="cartInfo" id="demo1">
					<!-- 购物车商品信息 -->
					<view class="cartInfochild">
						<!-- 选择框 -->
						<view class="cartInfo_switch common">
							<!-- 点击当前商品 -->
							<switch type="checkbox" :checked="item.checked" @click="singleCheck(index)" />
						</view>
						<!-- 图片 -->
						<view class="cartInfo_image common">
							<image :src="item.img|getImage" mode=""></image>
						</view>

						<!-- 信息 -->
						<view class="cartInfo_info">
							<label for="" style="font-size: 26rpx;">{{item.goodsname}}</label>
							<!-- <label for="" style="font-size: 24rpx; color: #ccc;">规格：黑色</label> -->
							<label for="" style="color: red;">￥{{item.price}}</label>
						</view>
						<!-- 加减数量 -->
						<view class="cartInfo_num">
							<view class="cartInfo_num_child">
								<label for="" @click="sub(index)">-</label>
								<label for="">{{item.num}}</label>
								<label for="" @click="add(index)">+</label>
							</view>
						</view>
					</view>
				</view>
				<view class="cartDel" id="demo2" @click="del(index)"><label for="">删除</label></view>
			</scroll-view>

		</view>

		<!-- 底部 -->
		<view class="foot">
			<view class="footd1">
				<switch type="checkbox" :checked="isAll" @change="handleAll" />
				<label>全选</label>
			</view>
			<view class="footd2">
				<view class="footd2sp1">
					总计：
					<label style="color: red;">￥{{totalPrice}}</label>
				</view>
				<label class="footd2sp2">不含运费，已优惠￥0.00</label>
			</view>
			<!-- 跳到提交订单，结算页面 -->
			<view class="footd3">
				<!-- 被选中的商品的个数 -->
				<label @click="toPay">去结算</label>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [], //购物车列表
			}
		},
		computed: {
			//总价
			// totalPrice:function(){
			// 	let result =0;
			// 	this.list.forEach(item=>{
			// 		if(item.checked){
			// 			result +=item.price*item.num
			// 		}
			// 	})
			// 	return result;
			// },
			totalPrice: {
				get: function() {
					// let result = 0;
					// this.list.forEach(item => {
					// 	if (item.checked) {
					// 		result += item.price * item.num
					// 	}
					// })
					// return result;
					
					// let list=this.list;
					const result = this.list.reduce((total, item) => {
						if (item.checked) {
							return total + item.price * item.num
						}else{
							return total;
						}
						
					}, 0)
					return result;
					// console.log(result);
				}
			},
			//是否全选
			isAll: {
				get: function() {
					let result = this.list.every(item => {
						return item.checked == true
					})
					return result;
				},
				set: function(newValue) {
					this.list.forEach(item => {
						item.checked = newValue
					})
				}
			}

		},
		methods: {
			//点击结算
			toPay() {
				let arr = this.list.filter(item => {
					return item.checked == true
				})
				// console.log(arr)
				uni.setStorageSync("confirm", arr)
				uni.navigateTo({
					url: "/pages/confirm/confirm"
				})
			},
			//删除商品
			async del(index) {

				//删除数据库中的数据
				let id = this.list[index].id;
				let {
					token
				} = uni.getStorageSync("userInfo")
				let result = await this.$http({
					url: "/api/cartdelete",
					data: {
						id
					},
					token
				}).catch(err => {
					console.error(err)
				})

				// 删除页面中的数据
				this.list.splice(index, 1)
			},
			handleAll() {
				this.isAll = !this.isAll
			},
			//点击单选
			singleCheck(index) {
				this.list[index].checked = !this.list[index].checked
			},
			//点击增加
			async add(index) {
				//页面中num累加
				this.list[index].num += 1;

				//修改数据库
				this.cartUpdate(index)

				// console.log(result);
			},

			//点击减少
			sub(index) {
				//改变页面num
				this.list[index].num -= 1;
				if (this.list[index].num <= 1) {
					this.list[index].num = 1;
				}

				//改变数据库中的数据
				this.cartUpdate(index)

			},
			//修改数据库购物车商品数量
			async cartUpdate(index) {
				//修改数据库中数据
				let num = this.list[index].num;
				//获取购物车id
				let id = this.list[index].id;
				let {
					token
				} = uni.getStorageSync("userInfo");

				//修改数据库中购物车商品数量
				let result = await this.$http({
					url: "/api/cartedit",
					data: {
						num,
						id
					},
					token
				}).catch(err => {
					console.log(err);
				})

			},
		},
		async onShow() {
			let {
				uid,
				token
			} = uni.getStorageSync("userInfo");

			let result = await this.$http({
				url: "/api/cartlist",
				data: {
					uid
				},
				token
			}).catch(err => {
				console.error(err)
			})

			let list = result.data.list;
			list.forEach(item => {
				item.checked = false;
			})
			
			this.list =list;
			
		}
	};
</script>

<style>
	@import url('../../common/css/cart.css');

	.cartInfo_image_img {
		width: 120rpx;
		height: 120rpx;
	}
</style>
